
 [class^="icon-"],
 [class*=" icon-"] {
     font-family: 'icomoon';
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;

     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}



/*.clearfix:before,*/
/*.clearfix:after {*/
/*    display: table;*/
/*    content: '';*/
/*}*/

/*.clearfix:after {*/
/*    clear: both;*/
/*}*/

body {
    font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #444;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    outline: none;
    color: #03a9f4;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #fff;
}

button:focus {
    outline: none;
}

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}


.htmleaf-header h1 {
    color: #D5D6E2;
    font-weight: 600;
    font-size: 2em;
    line-height: 1;
    margin-bottom: 0;
    font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}

.htmleaf-header h1 span {
    font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
    display: block;
    font-size: 60%;
    font-weight: 400;
    padding: 0.8em 0 0.5em 0;
    color: #c3c8cd;
}

/*nav*/
.htmleaf-demo a {
    color: #1d7db1;
    text-decoration: none;
}

/*.htmleaf-demo {*/
/*    width: 100%;*/
/*    padding-bottom: 1.2em;*/
/*}*/

.htmleaf-demo a {
    display: inline-block;
    margin: 0.5em;
    padding: 0.6em 1em;
    border: 3px solid #1d7db1;
    font-weight: 700;
}

.htmleaf-demo a:hover {
    opacity: 0.6;
}

.htmleaf-demo a.current {
    background: #1d7db1;
    color: #fff;
}



.htmleaf-icon span {
    display: none;
}


/* Content */
.content {
    -webkit-align-self: stretch;
    align-self: stretch;
    overflow: hidden;
    padding: 2em 2em 6em;
    width: 50%;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    z-index: 2;
}

.content:nth-child(even):last-child {
    width: 100%;
}

.content__title {
    margin: 0 auto 6em 0;
    font-size: 1em;
    z-index: 100;
    position: relative;
    color: rgba(0, 0, 0, 0.25);
}


.color-6 {
    position: absolute;
    /* width: 400px;
    height: 400px; */
    /* border-radius: 200px; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: #fff; */
    background: rgba(4, 167, 140, 0);
}



.related>a {
    vertical-align: top;
    width: calc(100% - 20px);
    max-width: 340px;
    display: inline-block;
    text-align: center;
    margin: 20px 10px;
    padding: 25px;
    font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}

.related a {
    display: inline-block;
    text-align: left;
    margin: 20px auto;
    padding: 10px 20px;
    opacity: 0.8;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-backface-visibility: hidden;
}

.related a:hover,
.related a:active {
    opacity: 1;
}

.related a img {
    max-width: 100%;
    opacity: 0.8;
    border-radius: 4px;
}

.related a:hover img,
.related a:active img {
    opacity: 1;
}

.related h3 {
    font-family: "Microsoft YaHei", sans-serif;
}

.related a h3 {
    font-weight: 300;
    margin-top: 0.15em;
    color: #fff;
}



@media screen and (max-width: 60em) {
    .htmleaf-header h1 {
        font-size: 3em;
    }

    .content {
        width: 100%;
    }

    .related {
        font-size: 0.9em;
    }
}
/*</style>*/
/*<!-- 卡片区 -->*/
/*<style>*/
 body {
     overflow: hidden;
 }

.stack {
    margin: 0 auto;
    position: relative;
    z-index: 1000;
    width: 350px;
    height: 400px;

    /* height: 100%; */
    padding: 0;
    list-style: none;
    pointer-events: none;
    box-shadow: 0 0 10px #666;
}

.stack__item {
    background: #fff;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
    position: absolute;
    opacity: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto;
}

#stack_mawar .stack__item span {
    text-align: left;
    font-size: 16px;
    color: var(--sub_color);
    font-weight: 400;
    border-left: 2px solid var(--sub_color);
    font-style: oblique;
    display: inline-block;
    width: auto;
    margin-left: 5px;
    margin-top: 5px;
}

.stack__item img {
    margin-top: 50px;
    padding: 10px;
    width: 100%;
    display: block;
    pointer-events: none;
}

.controls {
    position: relative;
    width: 200px;
    text-align: center;
    margin: 15px 0 0 0;
}

.button {
    border: none;
    background: none;
    position: relative;
    display: inline-block;
    padding: 0.25em;
    margin: 0 0.5em;
    cursor: pointer;
    font-size: 1.5em;
    width: 50px;
    height: 50px;
    z-index: 100;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.button .fa {
    pointer-events: none;
}

/*.button--default {*/
/*    background: #333;*/
/*    border-radius: 3px;*/
/*    color: #fff;*/
/*    font-size: 0.95em;*/
/*    font-weight: bold;*/
/*    padding: 0.65em 2em;*/
/*    width: auto;*/
/*    height: auto;*/
/*}*/

.button--sonar {
    border-radius: 50%;
    background: #fff;
}

.button--sonar::before {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    content: '';
    opacity: 0;
    pointer-events: none;
    border: 4px solid rgba(255, 255, 255, 0.5);
    margin: -35px 0 0 -35px;
    width: 70px;
    height: 70px;
}

.button--accept.button--active::before {
    background-color: var(--sub_color);
}

.button--reject.button--active::before {
    background-color: #e66868;
}

.button--sonar.button--active::before {

    -webkit-animation: anim-effect-sonar 0.3s ease-out forwards;
    animation: anim-effect-sonar 0.3s ease-out forwards;
}

@-webkit-keyframes anim-effect-sonar {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0.9, 0.9, 1);
        transform: scale3d(0.9, 0.9, 1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(1.4, 1.4, 1);
        transform: scale3d(1.4, 1.4, 1);
    }
}

@keyframes anim-effect-sonar {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0.9, 0.9, 1);
        transform: scale3d(0.9, 0.9, 1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(1.4, 1.4, 1);
        transform: scale3d(1.4, 1.4, 1);
    }
}

/*.material-circle {*/
/*    width: 150vh;*/
/*    height: 150vh;*/
/*    margin: -75vh 0 0 -75vh;*/
/*    z-index: 0;*/
/*    border-radius: 50%;*/
/*    pointer-events: none;*/
/*    opacity: 0;*/
/*    position: absolute;*/
/*    z-index: 0;*/
/*    -webkit-transform: scale3d(0, 0, 1);*/
/*    transform: scale3d(0, 0, 1);*/
/*}*/

/*.material-circle--accept.material-circle--active {*/
/*    background: #81d47d;*/
/*}*/

/*.material-circle--reject.material-circle--active {*/
/*    background: #e66868;*/
/*}*/

/*.material-circle--active {*/
/*    -webkit-animation: anim-effect-material 0.6s ease-out forwards;*/
/*    animation: anim-effect-material 0.6s ease-out forwards;*/
/*}*/

@-webkit-keyframes anim-effect-material {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0, 0, 1);
        transform: scale3d(0, 0, 1);
    }

    70% {
        opacity: 1;
        -webkit-transform: scale3d(1.4, 1.4, 1);
        transform: scale3d(1.4, 1.4, 1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(1.4, 1.4, 1);
        transform: scale3d(1.4, 1.4, 1);
    }
}

@keyframes anim-effect-material {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0, 0, 1);
        transform: scale3d(0, 0, 1);
    }

    70% {
        opacity: 1;
        -webkit-transform: scale3d(1.4, 1.4, 1);
        transform: scale3d(1.4, 1.4, 1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(1.4, 1.4, 1);
        transform: scale3d(1.4, 1.4, 1);
    }
}

.button:focus {
    outline: none;
}

.button--accept {
    margin-left: 20px;
    font-size: 10px;
    /* color: #81d47d; */
    color: var(--sub_color);
    transition: all var(--transform_slowily);
}

.button--accept:hover {
    /*transform: scale(1.1);*/
    box-shadow: 0 0 8px var(--sub_color);
    animation: roateBut 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}

.button--reject {
    margin-right: 20px;
    color: #e66868;
    transition: all var(--transform_slowily);
}

.button--reject:hover,
.button--reject:focus {
    /*transform: scale(1.1);*/
    box-shadow: 0 0 8px #e66868;
     animation: roateBut 1s ease-in;
     animation-fill-mode: forwards;
 }
 @keyframes roateBut {
     0%{
         transform: rotate(0deg);
     }
     100%{
         transform: rotate(720deg);
     }
 }
.text-hidden {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    color: transparent;
    display: block;
}

/* Animations */
.stack__item--reject,
.stack__item--accept {
    pointer-events: none;
}

/***********************************************/
/******************** yuda *********************/
/***********************************************/

.stack--yuda .stack__item--reject {
    -webkit-animation: yudaReject 0.5s forwards;
    animation: yudaReject 0.5s forwards;
}

@-webkit-keyframes yudaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }
}

@keyframes yudaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }
}

.stack--yuda .stack__item--accept {
    -webkit-animation: yudaAccept 0.5s forwards;
    animation: yudaAccept 0.5s forwards;
    -webkit-transform-origin: 50% 300%;
    transform-origin: 50% 300%;
}

@-webkit-keyframes yudaAccept {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 20deg);
        transform: rotate3d(0, 0, 1, 20deg);
    }
}

@keyframes yudaAccept {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 20deg);
        transform: rotate3d(0, 0, 1, 20deg);
    }
}


/***********************************************/
/******************** krisna *******************/
/***********************************************/


.stack--krisna .stack__item--reject {
    -webkit-animation: krisnaReject 0.5s forwards;
    animation: krisnaReject 0.5s forwards;
}

@-webkit-keyframes krisnaReject {
    to {
        -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
}

@keyframes krisnaReject {
    to {
        -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
}

.stack--krisna .stack__item--accept {
    -webkit-animation: krisnaAccept 0.5s forwards;
    animation: krisnaAccept 0.5s forwards;
}

@-webkit-keyframes krisnaAccept {
    to {
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
    }
}

@keyframes krisnaAccept {
    to {
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
    }
}

/* ...when content has 100% viewport width */
@media screen and (max-width: 60em) {
    @-webkit-keyframes krisnaReject {
        to {
            -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
        }
    }

    @keyframes krisnaReject {
        to {
            -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
        }
    }

    @-webkit-keyframes krisnaAccept {
        to {
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
            transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        }
    }

    @keyframes krisnaAccept {
        to {
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
            transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        }
    }
}


/***********************************************/
/******************** wangi *********************/
/***********************************************/

.stack--wangi .stack__item--reject {
    -webkit-animation: wangiReject 0.5s forwards;
    animation: wangiReject 0.5s forwards;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

@-webkit-keyframes wangiReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 400px, 0) rotate3d(0, 0, 1, 40deg);
        transform: translate3d(0, 400px, 0) rotate3d(0, 0, 1, 40deg);
    }
}

@keyframes wangiReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 400px, 0) rotate3d(0, 0, 1, 40deg);
        transform: translate3d(0, 400px, 0) rotate3d(0, 0, 1, 40deg);
    }
}

.stack--wangi .stack__item--accept {
    -webkit-animation: wangiAccept 0.5s forwards;
    animation: wangiAccept 0.5s forwards;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}

@-webkit-keyframes wangiAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 400px, 0) rotate3d(0, 0, 1, -40deg);
        transform: translate3d(0, 400px, 0) rotate3d(0, 0, 1, -40deg);
    }
}

@keyframes wangiAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 400px, 0) rotate3d(0, 0, 1, -40deg);
        transform: translate3d(0, 400px, 0) rotate3d(0, 0, 1, -40deg);
    }
}


/***********************************************/
/********************* wira ********************/
/***********************************************/


.stack--wira .stack__item--reject {
    -webkit-animation: wiraReject 0.5s forwards;
    animation: wiraReject 0.5s forwards;
    -webkit-animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
    animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
    -webkit-transform-origin: -150% 50%;
    transform-origin: -150% 50%;
}

@-webkit-keyframes wiraReject {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, -60deg);
        transform: rotate3d(0, 0, 1, -60deg);
    }
}

@keyframes wiraReject {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, -60deg);
        transform: rotate3d(0, 0, 1, -60deg);
    }
}

.stack--wira .stack__item--accept {
    -webkit-animation: wiraAccept 0.5s forwards;
    animation: wiraAccept 0.5s forwards;
    -webkit-animation-timing-function: cubic-bezier(0.3, 1, 0.3, 1);
    animation-timing-function: cubic-bezier(0.3, 1, 0.3, 1);
    -webkit-transform-origin: 250% 50%;
    transform-origin: 250% 50%;
}

@-webkit-keyframes wiraAccept {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
    }
}

@keyframes wiraAccept {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
    }
}


/***********************************************/
/******************** utari ********************/
/***********************************************/

.stack--utari .stack__item--reject {
    -webkit-animation: utariReject 0.6s forwards;
    animation: utariReject 0.6s forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

@-webkit-keyframes utariReject {
    40% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: translate3d(0, -20%, 30px);
        transform: translate3d(0, -20%, 30px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 150%, -300px) rotate3d(1, 0, 0, -40deg);
        transform: translate3d(0, 150%, -300px) rotate3d(1, 0, 0, -40deg);
    }
}

@keyframes utariReject {
    40% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: translate3d(0, -20%, 30px);
        transform: translate3d(0, -20%, 30px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 150%, -300px) rotate3d(1, 0, 0, -40deg);
        transform: translate3d(0, 150%, -300px) rotate3d(1, 0, 0, -40deg);
    }
}

.stack--utari .stack__item--accept {
    -webkit-animation: utariAccept 0.6s forwards;
    animation: utariAccept 0.6s forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes utariAccept {
    40% {
        -webkit-animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
        animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
        -webkit-transform: translate3d(-40%, 0, 0) scale3d(1.1, 1.1, 1);
        transform: translate3d(-40%, 0, 0) scale3d(1.1, 1.1, 1);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(10%, 0, 0) scale3d(0.1, 0.1, 1);
        transform: translate3d(25vw, 0, 0) translate3d(10%, 0, 0) scale3d(0.1, 0.1, 1);
    }
}

@keyframes utariAccept {
    40% {
        -webkit-animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
        animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
        -webkit-transform: translate3d(-40%, 0, 0) scale3d(1.1, 1.1, 1);
        transform: translate3d(-40%, 0, 0) scale3d(1.1, 1.1, 1);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(10%, 0, 0) scale3d(0.1, 0.1, 1);
        transform: translate3d(25vw, 0, 0) translate3d(10%, 0, 0) scale3d(0.1, 0.1, 1);
    }
}

/* ...when content has 100% viewport width */
@media screen and (max-width: 60em) {
    @-webkit-keyframes utariAccept {
        40% {
            -webkit-animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
            animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
            -webkit-transform: translate3d(-40%, 0, 0) scale3d(1.1, 1.1, 1);
            transform: translate3d(-40%, 0, 0) scale3d(1.1, 1.1, 1);
        }

        100% {
            opacity: 0;
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(10%, 0, 0) scale3d(0.1, 0.1, 1);
            transform: translate3d(50vw, 0, 0) translate3d(10%, 0, 0) scale3d(0.1, 0.1, 1);
        }
    }

    @keyframes utariAccept {
        40% {
            -webkit-animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
            animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
            -webkit-transform: translate3d(-40%, 0, 0) scale3d(1.1, 1.1, 1);
            transform: translate3d(-40%, 0, 0) scale3d(1.1, 1.1, 1);
        }

        100% {
            opacity: 0;
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(10%, 0, 0) scale3d(0.1, 0.1, 1);
            transform: translate3d(50vw, 0, 0) translate3d(10%, 0, 0) scale3d(0.1, 0.1, 1);
        }
    }
}

/***********************************************/
/******************* slamet ********************/
/***********************************************/

.counter {
    position: absolute;
    left: 50%;
    top: 30px;
    width: 40px;
    margin-left: -20px;
}

.counter svg {
    display: block;
    margin: 14px auto 0;
    fill: #58785A;
}

.counter__number {
    text-align: center;
    position: absolute;
    background: #e66868;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    bottom: -5px;
    right: -5px;
}

.stack--slamet .stack__item--reject {
    -webkit-animation: slametReject 0.5s forwards;
    animation: slametReject 0.5s forwards;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

@-webkit-keyframes slametReject {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(1, 0, 0, -90deg);
        transform: rotate3d(1, 0, 0, -90deg);
    }
}

@keyframes slametReject {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(1, 0, 0, -90deg);
        transform: rotate3d(1, 0, 0, -90deg);
    }
}

.stack--slamet .stack__item--accept {
    -webkit-animation: slametAccept 0.6s forwards;
    animation: slametAccept 0.6s forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes slametAccept {
    40% {
        -webkit-animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
        animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
        -webkit-transform: translate3d(0, 20%, 0) scale3d(1.1, 1.1, 1);
        transform: translate3d(0, 20%, 0) scale3d(1.1, 1.1, 1);
    }

    80% {
        opacity: 1;
        -webkit-transform: translate3d(0, -280px, 0) scale3d(0.1, 0.1, 1);
        transform: translate3d(0, -280px, 0) scale3d(0.1, 0.1, 1);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -250px, 0) scale3d(0.05, 0.05, 1);
        transform: translate3d(0, -250px, 0) scale3d(0.05, 0.05, 1);
    }
}

@keyframes slametAccept {
    40% {
        -webkit-animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
        animation-timing-function: cubic-bezier(0.4, 1, 0.3, 1);
        -webkit-transform: translate3d(0, 20%, 0) scale3d(1.1, 1.1, 1);
        transform: translate3d(0, 20%, 0) scale3d(1.1, 1.1, 1);
    }

    80% {
        opacity: 1;
        -webkit-transform: translate3d(0, -280px, 0) scale3d(0.1, 0.1, 1);
        transform: translate3d(0, -280px, 0) scale3d(0.1, 0.1, 1);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -250px, 0) scale3d(0.05, 0.05, 1);
        transform: translate3d(0, -250px, 0) scale3d(0.05, 0.05, 1);
    }
}


/***********************************************/
/******************** eka **********************/
/***********************************************/


.stack--eka .stack__item--reject {
    -webkit-animation: ekaReject 0.5s forwards;
    animation: ekaReject 0.5s forwards;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

@-webkit-keyframes ekaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(-150%, 150%, 0) rotate3d(0, 0, 1, -20deg);
        transform: translate3d(-150%, 150%, 0) rotate3d(0, 0, 1, -20deg);
    }
}

@keyframes ekaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(-150%, 150%, 0) rotate3d(0, 0, 1, -20deg);
        transform: translate3d(-150%, 150%, 0) rotate3d(0, 0, 1, -20deg);
    }
}

.stack--eka .stack__item--accept {
    -webkit-animation: ekaAccept 0.5s forwards;
    animation: ekaAccept 0.5s forwards;
    -webkit-transform-origin: -100% 50%;
    transform-origin: -100% 50%;
}

@-webkit-keyframes ekaAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(150%, -150%, 0) rotate3d(0, 0, 1, 20deg);
        transform: translate3d(150%, -150%, 0) rotate3d(0, 0, 1, 20deg);
    }
}

@keyframes ekaAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(150%, -150%, 0) rotate3d(0, 0, 1, 20deg);
        transform: translate3d(150%, -150%, 0) rotate3d(0, 0, 1, 20deg);
    }
}


/***********************************************/
/******************** dian *********************/
/***********************************************/


.stack--dian .stack__item--reject {
    -webkit-animation: dianReject 0.5s forwards;
    animation: dianReject 0.5s forwards;
    -webkit-transform-origin: 50% -300%;
    transform-origin: 50% -300%;
}

@-webkit-keyframes dianReject {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 20deg);
        transform: rotate3d(0, 0, 1, 20deg);
    }
}

@keyframes dianReject {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 20deg);
        transform: rotate3d(0, 0, 1, 20deg);
    }
}

.stack--dian .stack__item--accept {
    -webkit-animation: dianAccept 0.5s forwards;
    animation: dianAccept 0.5s forwards;
    -webkit-transform-origin: 50% -300%;
    transform-origin: 50% -300%;
}

@-webkit-keyframes dianAccept {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, -20deg);
        transform: rotate3d(0, 0, 1, -20deg);
    }
}

@keyframes dianAccept {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, -20deg);
        transform: rotate3d(0, 0, 1, -20deg);
    }
}


/***********************************************/
/******************** iman *********************/
/***********************************************/


.stack--iman .stack__item--reject {
    -webkit-animation: imanReject 0.5s forwards;
    animation: imanReject 0.5s forwards;
}

@-webkit-keyframes imanReject {
    to {
        -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
}

@keyframes imanReject {
    to {
        -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
}

.stack--iman .stack__item--accept {
    -webkit-animation: imanAccept 0.5s forwards;
    animation: imanAccept 0.5s forwards;
}

@-webkit-keyframes imanAccept {
    to {
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
    }
}

@keyframes imanAccept {
    to {
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
    }
}

/* ...when content has 100% viewport width */
@media screen and (max-width: 60em) {

    @-webkit-keyframes imanReject {
        to {
            -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
        }
    }

    @keyframes imanReject {
        to {
            -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
        }
    }

    @-webkit-keyframes imanAccept {
        to {
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
            transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        }
    }

    @keyframes imanAccept {
        to {
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
            transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        }
    }

}

/***********************************************/
/****************** iskandar *******************/
/***********************************************/


.stack--iskandar .stack__item--reject {
    -webkit-animation: iskandarReject 0.5s forwards;
    animation: iskandarReject 0.5s forwards;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

@-webkit-keyframes iskandarReject {
    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 20px) rotate3d(1, 0, 0, 90deg);
        transform: translate3d(0, -100px, 20px) rotate3d(1, 0, 0, 90deg);
    }
}

@keyframes iskandarReject {
    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 20px) rotate3d(1, 0, 0, 90deg);
        transform: translate3d(0, -100px, 20px) rotate3d(1, 0, 0, 90deg);
    }
}

.stack--iskandar .stack__item--accept {
    -webkit-animation: iskandarAccept 0.5s forwards;
    animation: iskandarAccept 0.5s forwards;
}

@-webkit-keyframes iskandarAccept {
    to {
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
    }
}

@keyframes iskandarAccept {
    to {
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
    }
}

/* ...when content has 100% viewport width */
@media screen and (max-width: 60em) {

    @-webkit-keyframes iskandarAccept {
        to {
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
            transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        }
    }

    @keyframes iskandarAccept {
        to {
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
            transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
        }
    }

}

/***********************************************/
/******************** kasih ********************/
/***********************************************/


.stack--kasih .stack__item--reject {
    -webkit-animation: kasihReject 0.4s ease-in forwards;
    animation: kasihReject 0.4s ease-in forwards;
}

@-webkit-keyframes kasihReject {
    to {
        -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0);
        transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0);
    }
}

@keyframes kasihReject {
    to {
        -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0);
        transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0);
    }
}

.stack--kasih .stack__item--accept {
    -webkit-animation: kasihAccept 0.4s ease-in forwards;
    animation: kasihAccept 0.4s ease-in forwards;
}

@-webkit-keyframes kasihAccept {
    to {
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0);
    }
}

@keyframes kasihAccept {
    to {
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0);
    }
}

/* ...when content has 100% vieport width */
@media screen and (max-width: 60em) {
    @-webkit-keyframes kasihReject {
        to {
            -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0);
            transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0);
        }
    }

    @keyframes kasihReject {
        to {
            -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0);
            transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0);
        }
    }

    @-webkit-keyframes kasihAccept {
        to {
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0);
            transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0);
        }
    }

    @keyframes kasihAccept {
        to {
            -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0);
            transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0);
        }
    }
}

/***********************************************/
/******************* buana ********************/
/***********************************************/


.stack--buana .stack__item--reject {
    -webkit-animation: buanaReject 0.5s forwards;
    animation: buanaReject 0.5s forwards;
}

@-webkit-keyframes buanaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(-25%, 200%, 0) rotate3d(0, 0, 1, 25deg);
        transform: translate3d(-25%, 200%, 0) rotate3d(0, 0, 1, 215deg);
    }
}

@keyframes buanaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(-25%, 200%, 0) rotate3d(0, 0, 1, 25deg);
        transform: translate3d(-25%, 200%, 0) rotate3d(0, 0, 1, 25deg);
    }
}

.stack--buana .stack__item--accept {
    -webkit-animation: buanaAccept 0.5s forwards;
    animation: buanaAccept 0.5s forwards;
}

@-webkit-keyframes buanaAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(25%, 200%, 0) rotate3d(0, 0, 1, -25deg);
        transform: translate3d(25%, 200%, 0) rotate3d(0, 0, 1, -25deg);
    }
}

@keyframes buanaAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(25%, 200%, 0) rotate3d(0, 0, 1, -25deg);
        transform: translate3d(25%, 200%, 0) rotate3d(0, 0, 1, -25deg);
    }
}

/***********************************************/
/******************** mawar *********************/
/***********************************************/

.stack--mawar .stack__item--reject {
    -webkit-animation: mawarReject 0.5s forwards;
    animation: mawarReject 0.5s forwards;
}

@-webkit-keyframes mawarReject {
    to {
        -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0);
        transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0);
    }
}

@keyframes mawarReject {
    to {
        -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0);
        transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0);
    }
}

.stack--mawar .stack__item--accept {
    -webkit-animation: mawarAccept 0.5s forwards;
    animation: mawarAccept 0.5s forwards;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

@-webkit-keyframes mawarAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(150px, 0, 0) scale3d(0.7, 0.7, 1) rotate3d(0, 1, 0, 90deg);
        transform: translate3d(150px, 0, 0) scale3d(0.7, 0.7, 1) rotate3d(0, 1, 0, 90deg);
    }
}

@keyframes mawarAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(150px, 0, 0) scale3d(0.7, 0.7, 1) rotate3d(0, 1, 0, 90deg);
        transform: translate3d(150px, 0, 0) scale3d(0.7, 0.7, 1) rotate3d(0, 1, 0, 90deg);
    }
}

/* ...when content has 100% vieport width */
@media screen and (max-width: 60em) {

    @-webkit-keyframes mawarReject {
        to {
            -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0);
            transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0);
        }
    }

    @keyframes mawarReject {
        to {
            -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0);
            transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0);
        }
    }

}


/***********************************************/
/******************** cinta **********************/
/***********************************************/


.stack--cinta .stack__item--reject {
    -webkit-animation: cintaReject 0.5s forwards;
    animation: cintaReject 0.5s forwards;
}

@-webkit-keyframes cintaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0);
    }
}

@keyframes cintaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0);
        transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0);
    }
}

.stack--cinta .stack__item--accept {
    -webkit-animation: cintaAccept 0.5s forwards;
    animation: cintaAccept 0.5s forwards;
}

@-webkit-keyframes cintaAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 1000px);
        transform: translate3d(0, 0, 1000px);
    }
}

@keyframes cintaAccept {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 1000px);
        transform: translate3d(0, 0, 1000px);
    }
}

@media screen and (max-width: 60em) {
    .stack {
        width: 260px;
        height: 260px;
    }
}
/*</style>*/
/*<!-- //填写申请 -->*/
/*<style>*/
 .appover-box{
     position: absolute;
     /* top: 50%;
     left: 50%;
     transform: translate(-50%,-50%); */
     top: 0%;
     left: 0%;
     transform: translate(0%,0%);
     display: none;
     /* width: 100%;
     height: 100%; */
     /* width: 450px;
     height: 500px; */
     width: 0;
     height: 0;
     border-radius: 5px;
     box-shadow: 0 0 8px #fff;

     transition: all 0.5s;
     background-color: #fff;
     opacity: 0;
     z-index: 95;

     -o-user-select: none;
     -moz-user-select: none; /*火狐 firefox*/
     -webkit-user-select: none; /*webkit浏览器*/
     -ms-user-select: none; /*IE10+*/
     -khtml-user-select :none; /*早期的浏览器*/
     user-select: none;
 }
.appover-box .sure-btn-box{
    width: 100%;
    display: inline;
    position: absolute;
    bottom: 0px;
}
.appover-box .sure-btn-box .sure_this_card{
    width: 100px;
    height: 30px;
    float: right;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-top: 10px;
    color: var(--sub_color);
    transition: all var(--transform_slowily);
}
.appover-box .sure-btn-box .sure_this_card:hover{
    color: #fff;
    background-color: var(--sub_color);
}
.bigger{
    /* animation: toBig 0.3s ease-in; */

    /* -webkit-animation: toBig 1s cubic-bezier(.62,-0.91,.45,1.97); */
    /* animation: toBig 1s cubic-bezier(.62,-0.91,.45,1.97); */
    animation: toBig 1s cubic-bezier(0.19, 1, 0.22, 1);
    /* animation: toBig 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    animation-fill-mode: forwards;
}
.smaller{
    /* animation: toBig 1s cubic-bezier(0.19, 1, 0.22, 1); */
    animation: toSmall 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}
.hasSureCard{
    animation: isSure 1s cubic-bezier(0.19, 1, 0.22, 1);
    /* animation-delay: 0.5s; */
    animation-fill-mode: forwards;
}
@keyframes toBig {
    0%{
        width: 0;
        height: 0;
        opacity: 0;
        display: none;
    }
    100%{
        width: 450px;
        height: 500px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 1;
    }
}
@keyframes toSmall {
    0%{
        width: 450px;
        height: 500px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 1;
    }
    100%{
        width: 0;
        height: 0;
        top: 0%;
        left: 0%;
        transform: translate(0%,0%);
        opacity: 0;
        display: none;
        box-shadow: 0 0 8px var(--sub_color);
    }
}
@keyframes isSure{
    0%{
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)  scale(1);
    }
    30%{
        width: 1%;
        height: 1%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(0.1);
    }
    100%{
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(1);

        z-index: 95;
        opacity: 1;
    }
}

.appover-box .top span{
    font-size: 12px;
    color: var(--sub_color);
    font-weight: 400;
    /* border-left: 2px solid var(--sub_color); */
    outline: 1px solid var(--sub_color);
}
.appover-box .top{
    margin-top: 30px;
    margin-left: 30px;
    padding-left: 1px;
    border-left: 2px solid var(--sub_color);
}
.appover-box .top ._card{
    position: absolute;
    width: 80%;
    height: 50%;
    top: 50%;
    left: 50%;
    max-width: 500px;
    max-height: 450px;
    transform: translate(-50%,-50%);
    background-color: var(--sub_color);
    border-radius: 10px;
    border: 1px solid var(--sub_color);
    box-shadow: 0 0 10px var(--sub_color);;
}
/*</style>*/
/*<!-- 背景 -->*/
/*<style>*/
 body{
     background-color: var(--sub_color);
     /* position: relative;
     background-color: rgb(6, 240, 201); */
 }
/*</style>*/
